<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>滑动门的制作与难点剖析</title>
        <style type="text/css">
         *{margin:0; padding:0;}
   body{font-size:12px;}
   #content{margin:0 auto; width:600px; border:1px #000 solid;}
   #tabs{height:30px; background:#000; overflow:hidden; position:relative;}
   #tabs #state{display:block; top:0; right:0; width:30px; height:30px; font-size:24px; font-weight:700; text-align:center; color:#fff; cursor:pointer; position:absolute;}
   #tabs li{display:inline; padding:0 8px; line-height:30px; color:#fff; list-style:none; cursor:pointer; float:left;}
   #tabs .active{color:#000; background:#fff;}
   #list{padding:10px 0;}
   #list ul{margin:0 25px; display:none;}
   #list ul li{height:25px; line-height:25px;}
   #list .active{display:block;}
        </style>
        <script type="text/javascript">
         window.onload=function(){
          var $ = function(ids)
    {
     return document.getElementById(ids);
    }
          var tabli=$("tabs").getElementsByTagName("li");
          var listul=$("list").getElementsByTagName("ul");
          var state=$("state");
          for (var i = 0; i < tabli.length; i++) {
           tabli[i].index=i;
           tabli[i].onmouseover=function() {
            for (var j = 0; j < tabli.length; j++) {
             tabli[j].className=listul[j].className ="";
            };
            this.className = listul[this.index].className = "active";
           }
          };

          state.onclick = function () {
           var text=this.innerHTML;
           if (text=="-") {
            this.innerHTML = "+";
            list.style.display="none";
           } else{
            this.innerHTML = "-";
            list.style.display="block";
           };
          }
         
         
         }
   
        </script>
    </head>
   
    <body>
     <div id="content">
         <div id="tabs">
             <ul>
                    <li class="active">暴给力</li>
                    <li>职业指导</li>
                    <li>充电区</li>
                </ul>
                <span id="state">-</span>
            </div>
            <div id="list">
             <ul class="active">
                    <li>IE6 PNG 解决方案合集</li>
                    <li>firefox下输入框innerHtml问题</li>
                    <li>精品菜单导航，多年精心收集整理上上品菜单</li>
                    <li>60个WEB实用效果集合</li>
                    <li>CSS3动态按钮导航集锦</li>
                    <li>HTML 5的革新：结构之美</li>
                    <li>JavaScript高级程序设计（第2版）</li>
                    <li>w3cfuns-我爱你！~~~</li>
                    <li>高性能网站建设指南</li>
                    <li>罕见的皮具拉链效果博客PSD</li>
                    <li>【基础五】块状元素和内联元素</li>
                    <li>“阳癫疯”的纯css下拉导航原理</li>
                    <li>请问这个排序功能如何实现？</li>
                    <li>分享10个便利的HTML5/CSS3框架</li>
                    <li>白璐ersonal 申请【热血活动】版块版主</li>
                    <li>web前端标准在各浏览器中的差异</li>
                </ul>
                <ul>
                    <li>腾讯面试题</li>
                    <li>近期面试感受</li>
                    <li>腾讯实习生web前端JS开发工程师面试经历</li>
                    <li>阿里巴巴web前端开发面试题</li>
                    <li>网易页面重构面试题</li>
                    <li>网易web前端开发师面试问答的经历</li>
                    <li>2011腾讯前端面试稿</li>
                    <li>Alibaba web前端开发工程师面试奇遇记</li>
                    <li>腾讯实习生网页重构组招聘公开试题（含答案</li>
                    <li>求职记——记录成为面霸的全过程</li>
                    <li>淘宝Web前端开发面试经历</li>
                    <li>百度前端面试题对话记录（内推面试）</li>
                    <li>2011年最新百度前端开发面试经历(一面和二面</li>
                    <li>去TX的事基本黄了，题我发出来了</li>
                    <li>俺们公司的面试题</li>
                </ul>
                <ul>
                    <li>厘米IT学院第89期xHTML+CSS网页布局加强班风</li>
                    <li>厘米IT学院JavaScript系统班北京小郭毕业啦</li>
                    <li>厘米IT学院第92期网页布局系统小班学员风采</li>
                    <li>厘米IT学院班xHTML+CSS系统小班课堂实况</li>
                    <li>厘米IT学院第91期网页布局系统小班学员风采</li>
                    <li>厘米IT学院第90期网页布局加强班学员风采</li>
                    <li>厘米IT学院系统小班！恭喜高同学毕业！</li>
                </ul>
            </div>
        </div>
    </body>
</html>